<template>
	<view class="content">
		<!-- 联系人 -->
		<view class="rela-modul">
			<view class="head">
				<view class="left">
					<image class="img" src="../../../static/images/icon_file.png" mode="aspectFill"></image>
					<text class="text">附件</text>
				</view>
				<view class="right">
					<image class="img" src="../../../static/images/icon_pens.png" mode="aspectFill"></image>
					<text class="text">新建</text>
				</view>
			</view>
			<view class="file-list">
				<view class="item">
					<image class="icon" src="../../../static/images/icon_file_green.png" mode="aspectFill"></image>
					<text class="name ellipsis">tmp-423678263478264728462846264362432846</text>
					<text class="size">247.24Kb</text>
					<image class="dele" src="../../../static/images/icon_cross.png" mode="aspectFill"></image>
				</view>
				<view class="item">
					<image class="icon" src="../../../static/images/icon_file_green.png" mode="aspectFill"></image>
					<text class="name ellipsis">tmp-423678263478264728462846264362432846</text>
					<text class="size">247.24Kb</text>
					<image class="dele" src="../../../static/images/icon_cross.png" mode="aspectFill"></image>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				
			}
		},
		onLoad() {
			// 修改顶部导航背景色
			uni.setNavigationBarColor({
				frontColor: '#ffffff',
				backgroundColor: '#39b54a',
				animation: {
					duration: 400,
					timingFunc: 'easeIn'
				}
			})
		},
		methods: {
			
		}
	}
</script>

<style scoped lang="scss">
	.content{
		background: #fff;
		.rela-modul{
			margin-bottom: 20upx;
			.head{
				padding: 20upx 30upx;
				display: flex;
				align-items: center;
				justify-content: space-between;
				border-bottom: 1px solid #f7f7f7;
				.left{
					display: flex;
					align-items: center;
					.img{
						width: 40upx;
						height: 40upx;
						margin-right: 20upx;
					}
					.text{
						font-size: 28upx;
						color: #333;
					}
				}
				.right{
					display: flex;
					align-items: center;
					.img{
						width: 30upx;
						height: 30upx;
						margin-right: 20upx;
					}
					.text{
						font-size: 28upx;
						color: #2172FF;
					}
				}
			}
			// 附件列表
			.file-list{
				padding: 20upx;
				.item{
					display: flex;
					align-items: center;
					padding: 20upx;
					border-radius: 8upx;
					background: #e5ffee;
					margin-bottom: 20upx;
					&:last-child{
						margin-bottom: 0;
					}
					.icon{
						width: 30upx;
						height: 30upx;
						margin-right: 20upx;
					}
					.name{
						font-size: 24upx;
						color: #000;
						width: 70%;
					}
					.size{
						font-size: 24upx;
						color: #999;
						margin-left: 20upx;
					}
					.dele{
						width: 20upx;
						height: 20upx;
						margin-left: 20upx;
					}
				}
			}
		}
	}
</style>
